<script setup lang="ts">
import { PropType, watch, ref } from "vue";
import { ElForm, ElFormItem, FormInstance } from "element-plus";
import SelectBase from "@/components/SelectBase.vue";
import PrizeTable from "@/views/draw/prize.vue";
import { pushArr } from "@/util";
const
  props = defineProps({
    modelValue: { type: Object as PropType<gt.sql.prizeGroup>, default: format.def.prize, },
    disabled: { type: Boolean, default: false }
  }),
  rules = ref({
    name: { required: true, message: "名称2-20个字符", trigger: "blur", min: 2, max: 20, },
    num: { required: true, message: "数量至少生成1个", trigger: "blur", },
  }),
  entity = ref<FormInstance>(),
  allPrize = ref<gt.sql.prize[]>([]),
  cpid = ref(undefined),
  prize = ref<gt.sql.prize>()
  ;
async function init() {
  if (!props.modelValue.num) {
    props.modelValue.num = 1;
  }
  allPrize.value = await gd.prize.read();
}
init();
let run = true;
watch(() => props.modelValue.prize, async (n) => {
  if (run && n) {
    prize.value = await gd.prize.getById(n);
  }
}, { deep: true, immediate: true });
watch(() => props.modelValue._content, n => {
  props.modelValue.content = n.map(e => e.id);
}, { deep: true, immediate: true });
defineExpose({
  validate() {
    return new Promise<boolean>((resolve) => {
      if (entity.value) {
        entity.value.validate().then(resolve).catch(() => { resolve(false); });
      } else {
        resolve(false);
      }
    });
  },
  resetFields() { entity.value?.resetFields(); }
});
function select0(cbk: InstanceType<typeof SelectBase>["open"]) {
  if (props.disabled) {
    return;
  }
  cbk("prize", "请选择奖励内容").then(e => {
    run = false;
    prize.value = e;
    props.modelValue.prize = e?.id || "";
    next(() => { run = true; });
  }).catch(() => { });
}
async function prizesChange() {
  const id = cpid.value;
  if (id) {
    if (id == "all") {
      props.modelValue._content = allPrize.value.map(e => e);
    } else {
      const e = allPrize.value.find(e => e.id == id);
      if (e) {
        pushArr(props.modelValue._content, e);
      }
    }
  }
  next(() => { cpid.value = undefined; });
}

</script>
<template>
  <ElForm class="order xw zb" ref="entity" :model="modelValue" :rules="rules" labelWidth="6em">
    <ElFormItem label="id" prop="id"><el-input v-model="modelValue.id" disabled placeholder="系统自动生成" /></ElFormItem>
    <div class="x wf oh">
      <ElFormItem label="名称" prop="name">
        <el-input v-model="modelValue.name" placeholder="请输入名称" :disabled="disabled" />
      </ElFormItem>
      <ElFormItem label="奖品" prop="prize">
        <SelectBase v-model="modelValue.prize" placeholder="请输入名称" @click="select0" defaultLabel="随机" />
      </ElFormItem>
      <ElFormItem label="生成数量" prop="num">
        <el-input-number v-model="modelValue.num" :min="1" :disabled="disabled" />
      </ElFormItem>
    </div>

    <ElFormItem class="wf" label="奖池" prop="permission">
      <div class="wf y oh" style="height:30em;">
        <div class="tools x bx oh">
          <span>填充奖池:</span>
          <el-select v-model="cpid" placeholder="请选择奖池进行填充" @change="prizesChange">
            <el-option label="全部" value="all" />
            <el-option v-for="i in allPrize" :key="i.id" :label="i.name" :value="i.id" />
          </el-select>
        </div>
        <PrizeTable :list="modelValue._content" />
      </div>
    </ElFormItem>
  </ElForm>
</template>
<style lang="scss" scoped>
.order {
  position: relative;
  >:not(.wf) {
    width: 49%;
  }
  .tools {
    padding: 0.4em;
    >span {
      flex-shrink: 0;
      margin: 0 1em;
    }
    >.el-select {
      flex-grow: 1;
    }
  }
}
</style>